 /* 颜色变量 */
 
 $theme-color: #333333; // 主题色
 $reverse-color: #ffffff; // 主题反色
 
 $border-color: #f3f3f3; // 边框颜色
 
 $header-height: calc(var(--navbar-height) + var(--status-bar-height)); // 导航栏高度，包含状态栏
 
 /* 行为相关颜色 */
 $uni-color-primary: #00A0AC;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
 /* 文字基本颜色 */
 $uni-text-color:#333;//基本色
 $uni-text-color-inverse:#fff;//反色
 $uni-text-color-grey:#808388;//辅助灰色，如加载更多的提示信息
 $uni-text-color-gray:#666;
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable:#c0c0c0;
 
 /* 背景颜色 */
 $uni-bg-color:#ffffff;
 $uni-bg-color-grey:#f8f8f8;
 $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
 /* 边框颜色 */
 $uni-border-color:#c8c7cc;
 
 /* 尺寸变量 */
 
 /* 文字尺寸 */
 $uni-font-size-topbar:35rpx;
 $uni-font-size-sm:24rpx;
 $uni-font-size-base:28rpx;
 $uni-font-size-lg:32rpx;
 
 /* 图片尺寸 */
 $uni-img-size-sm:40rpx;
 $uni-img-size-base:52rpx;
 $uni-img-size-lg:80rpx;
 
 /* Border Radius */
 $uni-border-radius-sm: 4rpx;
 $uni-border-radius-base: 6rpx;
 $uni-border-radius-lg: 12rpx;
 $uni-border-radius-circle: 50%;
 
 /* 水平间距 */
 $uni-spacing-row-sm: 10px;
 $uni-spacing-row-base: 20rpx;
 $uni-spacing-row-lg: 30rpx;
 
 /* 垂直间距 */
 $uni-spacing-col-sm: 8rpx;
 $uni-spacing-col-base: 16rpx;
 $uni-spacing-col-lg: 24rpx;
 
 /* 透明度 */
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
 /* 文章场景相关 */
 $uni-color-title: #2C405A; // 文章标题颜色
 $uni-font-size-title:40rpx;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:36rpx;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph:30rpx;
$prefix: 'hs-';

/* 定位布局 */
.#{$prefix}rela,
.#{$prefix}relative {
  position: relative;
}

.#{$prefix}abso,
.#{$prefix}absolute {
  position: absolute;
}

.#{$prefix}abso-full,
.#{$prefix}absolute-full {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.#{$prefix}abso-center,
.#{$prefix}absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.#{$prefix}abso-bottom,
.#{$prefix}absolute-bottom {
  position: absolute;
  bottom: 0;
}

.#{$prefix}fixed {
  position: fixed;
}

.#{$prefix}fixed-full {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.#{$prefix}fixed-center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.#{$prefix}fixed-bottom {
  position: fixed;
  bottom: 0;
}

@for $i from -5 through 30 {
  .#{$prefix}zindex-#{$i} {
    z-index: $i;
  }
}

/* 层级 */
@for $i from -5 through 30 {
    .#{$prefix}zindex-#{$i} {
      z-index: $i;
    }
}
/* 文字 */
.#{$prefix}text-left {
    text-align: left;
  }
  
  .#{$prefix}text-right {
    text-align: right;
  }
  
  .#{$prefix}text-center {
    text-align: center;
  }
  
  .#{$prefix}text-justify {
    text-align: justify;
  }
  
  .#{$prefix}text-white,
  .#{$prefix}color-white {
    color: #ffffff;
  }
  
  .#{$prefix}color-grey {
    color: $uni-text-color-grey;
  }
  .#{$prefix}color-gray {
    color: $uni-text-color-gray;
  }
  
  .#{$prefix}color-price {
    color: #ff3e16;
  }
  
  .#{$prefix}color-theme {
    color: $theme-color;
  }
  
  @for $i from 20 through 48 {
    @if $i % 2 == 0 {
      .#{$prefix}fz-#{$i} {
        font-size: #{$i}rpx;
      }
    }
  }
  
  @for $i from 60 through 160 {
    @if $i % 10 == 0 {
      .#{$prefix}fz-#{$i} {
        font-size: #{$i}rpx;
      }
    }
  }
  
  @for $i from 1 through 10 {
    .#{$prefix}line-#{$i} {
        overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
      -webkit-line-clamp: $i;
    }
  }
  
  .#{$prefix}line-height,
  .#{$prefix}l-h {
    line-height: 1;
  }
  
  .#{$prefix}line-height-12,
  .#{$prefix}l-h-12 {
    line-height: 1.2;
  }
  
  .#{$prefix}line-height-15,
  .#{$prefix}l-h-15 {
    line-height: 1.5;
  }
  
  .#{$prefix}line-height-20,
  .#{$prefix}l-h-20 {
    line-height: 2;
  }
  
  .#{$prefix}f-w-2 {
    font-weight: 200;
  }
  
  .#{$prefix}f-w-4 {
    font-weight: 400;
  }
  
  .#{$prefix}f-w-5 {
    font-weight: 500;
  }
  
  .#{$prefix}f-w-6 {
    font-weight: 600;
  }
  
  .#{$prefix}f-w-8 {
    font-weight: 800;
  }
  
  .#{$prefix}f-w-bold {
    font-weight: bold;
  }
  
  .#{$prefix}text-warp {
    text-wrap: break-word;
  }
  
  /* 动画 */
  @keyframes #{$prefix}frames-rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .#{$prefix}ani-rotate {
    animation: bc-frames-rotate 1s infinite linear;
  }
  
  /* 阴影渐变 */
  
  /* 边框 */
  .#{$prefix}border {
    border: solid $border-color 2rpx;
  }
  
  .#{$prefix}border-left,
  .#{$prefix}border-l {
    border-left: solid $border-color 2rpx;
  }
  
  .#{$prefix}border-right,
  .#{$prefix}border-r {
    border-right: solid $border-color 2rpx;
  }
  
  .#{$prefix}border-bottom,
  .#{$prefix}border-b {
    border-bottom: solid $border-color 2rpx;
  }
  
  .#{$prefix}border-top,
  .#{$prefix}border-t {
    border-top: solid $border-color 2rpx;
  }
  
  // 外边距：生成 4的倍数以及10的倍数项
  @for $i from 0 through 200 {
    @if $i % 4 == 0 {
      .#{$prefix}margin-#{$i},
      .#{$prefix}m-#{$i} {
        margin: #{$i}rpx;
      }
  
      .#{$prefix}margin-row-#{$i},
      .#{$prefix}m-row-#{$i} {
        margin-left: #{$i}rpx;
        margin-right: #{$i}rpx;
      }
  
      .#{$prefix}margin-col-#{$i},
      .#{$prefix}m-col-#{$i} {
        margin-top: #{$i}rpx;
        margin-bottom: #{$i}rpx;
      }
    }
  
    @if $i % 10 == 0 {
      @if $i % 4 != 0 {
        .#{$prefix}margin-#{$i},
        .#{$prefix}m-#{$i} {
          margin: #{$i}rpx;
        }
  
        .#{$prefix}margin-row-#{$i},
        .#{$prefix}m-row-#{$i} {
          margin-left: #{$i}rpx;
          margin-right: #{$i}rpx;
        }
  
        .#{$prefix}margin-col-#{$i},
        .#{$prefix}m-col-#{$i} {
          margin-top: #{$i}rpx;
          margin-bottom: #{$i}rpx;
        }
      }
    }
  }
  
  // 单外边距
  @for $i from 0 through 200 {
    @each $j in left, right, top, bottom {
      $k: l;
  
      @if $j == right {
        $k: r;
      } @else if $j == top {
        $k: t;
      } @else if $j == bottom {
        $k: b;
      }
  
      @if $i % 4 == 0 {
        .#{$prefix}margin-#{$j}-#{$i} {
          margin-#{$j}: #{$i}rpx;
        }
  
        .#{$prefix}m-#{$k}-#{$i} {
          margin-#{$j}: #{$i}rpx;
        }
      }
  
      @if $i % 10 == 0 {
        @if $i % 4 != 0 {
          .#{$prefix}margin-#{$j}-#{$i} {
            margin-#{$j}: #{$i}rpx;
          }
  
          .#{$prefix}m-#{$k}-#{$i} {
            margin-#{$j}: #{$i}rpx;
          }
        }
      }
    }
  }
  
  // 内边距：生成 4的倍数以及10的倍数项
  @for $i from 0 through 200 {
    @if $i % 4 == 0 {
      .#{$prefix}padding-#{$i} {
        padding: #{$i}rpx;
      }
  
      .#{$prefix}p-#{$i} {
        padding: #{$i}rpx;
      }
  
      .#{$prefix}padding-row-#{$i},
      .#{$prefix}p-row-#{$i} {
        padding-left: #{$i}rpx;
        padding-right: #{$i}rpx;
      }
  
      .#{$prefix}padding-col-#{$i},
      .#{$prefix}p-col-#{$i} {
        padding-top: #{$i}rpx;
        padding-bottom: #{$i}rpx;
      }
    }
  
    @if $i % 10 == 0 {
      @if $i % 4 != 0 {
        .#{$prefix}padding-#{$i} {
          padding: #{$i}rpx;
        }
  
        .#{$prefix}p-#{$i} {
          padding: #{$i}rpx;
        }
  
        .#{$prefix}padding-row-#{$i},
        .#{$prefix}p-row-#{$i} {
          padding-left: #{$i}rpx;
          padding-right: #{$i}rpx;
        }
  
        .#{$prefix}padding-col-#{$i},
        .#{$prefix}p-col-#{$i} {
          padding-top: #{$i}rpx;
          padding-bottom: #{$i}rpx;
        }
      }
    }
  }
  
  // 单内边距
  @for $i from 0 through 200 {
    @each $j in left, right, top, bottom {
      $k: l;
  
      @if $j == right {
        $k: r;
      } @else if $j == top {
        $k: t;
      } @else if $j == bottom {
        $k: b;
      }
  
      @if $i % 4 == 0 {
        .#{$prefix}padding-#{$j}-#{$i} {
          padding-#{$j}: #{$i}rpx;
        }
  
        .#{$prefix}p-#{$k}-#{$i} {
          padding-#{$j}: #{$i}rpx;
        }
      }
  
      @if $i % 10 == 0 {
        @if $i % 4 != 0 {
          .#{$prefix}padding-#{$j}-#{$i} {
            padding-#{$j}: #{$i}rpx;
          }
  
          .#{$prefix}p-#{$k}-#{$i} {
            padding-#{$j}: #{$i}rpx;
          }
        }
      }
    }
  }
  
  /* 透明度 */
  @for $i from 0 through 10 {
    .#{$prefix}opacity-#{$i} {
      opacity: calc(#{$i} / 10);
    }
  
    .#{$prefix}opa-#{$i} {
      opacity: calc(#{$i} / 10);
    }
  }
  
  /* 圆角 */
  .#{$prefix}round {
    border-radius: 50%;
  }
  
  @for $i from 0 through 60 {
    @if $i % 4 == 0 {
      .#{$prefix}radius-#{$i} {
        border-radius: #{$i}rpx;
      }
    }
  
    @if $i % 10 == 0 {
      @if $i % 4 != 0 {
        .#{$prefix}radius-#{$i} {
          border-radius: #{$i}rpx;
        }
      }
    }
  }